<template>
	<view class="order_contain">
		<view class="top_c">
			<view class="pay_order_num">
				订单编号：{{orderBaseProp.orderSn}}
			</view>
			<view class="status">
				{{orderStatus(orderBaseProp.status)}}
			</view>
		</view>
		<view class="pay_order_list" v-for="(item,index) in orderListProp" :key="index">
			<view class="good_info_c">
				<view class="good_info">
					<view class="good_image_c">
						<image :src="item.productPic" mode="aspectFill"></image>
					</view>
					<view class="good_detail">
						<view class="name_price">
							<text>{{item.productName}}</text>
							<text>￥{{item.productPrice}}元</text>
						</view>
						<view>
							<text>编号:{{item.productSn || ''}}</text>
							<text class="good_num">x {{item.productQuantity}}</text>
						</view>
						<view>
							<text>{{item.productAttr | productAttrFilter}}</text>
						</view>
					</view>
				</view>
				<slot name="returnGood" :goodIndex="{index}"></slot>
			</view>
		</view>
		<view class="total">
			合计： {{orderBaseProp.totalAmount}}元
		</view>
		<slot name='btn_bar'></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: ['orderListProp', 'orderBaseProp', 'tarType'],
		filters: {
			productAttrFilter(value) {
				let attr = JSON.parse(value);
				let str = '';
				attr.forEach(item => {
					str += item.key + ":" + item.value + ' '
				})
				return str
			},
		},
		watch: {},
		computed: {
			orderStatus() {
				return function(val) {
					if (this.tarType !== 'applicationDrawback')
						switch (val) {
							case 0:
								return "未付款"
								break;
							case 1:
								return "等待发货"
								break;
							case 2:
								return "已发货"
								break;
							case 3:
								return "已收货"
								break;
							default:
								return "暂定"
						} else {
							console.log('jjjj');
							switch (val) {
								case 0:
									return '等待处理';
									break;
								case 1:
									return '确认退货,等待发货';
									break;
								case 2:
									return '已退款';
									break;
								case 3:
									return '已拒绝';
									break;
								case 9:
									return '拒绝退货';
									break;

								default:
									break;
							}
						}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_contain {
		width: 90%;
		margin: auto;
		padding: 30rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		background-color: #fff;

		.top_c {
			height: 140rpx;
			display: flex;
			justify-content: space-between;
			font-size: $uni-font-size-24;

			.pay_order_num {
				line-height: 80rpx;
				width: 400rpx;

			}

			.status {
				font-weight: 600;
				line-height: 80rpx;
				color: $themeColor;

			}
		}

		.pay_order_list {
			width: 100%;
			border-bottom: 3rpx solid #e3e3e3;
			padding-bottom: 20rpx;

			.good_info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.good_image_c {
					width: 160rpx;
					height: 160rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.good_detail {
					padding-left: 20rpx;

					view {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						font-size: $uni-font-size-24;
						width: 410rpx;
						color: #999;

						&:nth-child(1) {
							padding: 20rpx 0;
							color: #000;
							font-size: $uni-font-size-sm;
						}
					}
				}
			}

		}

		.total {
			width: 100%;
			text-align: right;
			padding: 10rpx 0;
			font-size: $uni-font-size-sm
		}
	}
</style>
